<template>
	<i-drawers v-model="showCar" @change="showCar = false" bodyHeight="900rpx">
		<view class="car_number">
			<view class="car_title">
				<view></view>
				<view>车牌号</view>
				<view class="image" @click="showCar = false">
					<image src="../../static/images/close_gray_icon.png" mode=""></image>
				</view>
			</view>
			<car-number-input :shopPop="showCar" @numberInputResult="numberInputResult"
				:defaultStr="defaultNum"></car-number-input>
			<view style="height: 48rpx;"></view>
			<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32" @click="submit"
				:disabled="disabled">保存</i-buttons>
		</view>
	</i-drawers>
	<i-popup v-if="showPop" @confirm="propConfirm" @close="showPop = false" :confirmData="confirmData">
		<view class="prop_title">
			该手机号已存在，是否前往编辑？
		</view>
	</i-popup>
	<i-picker :value="valueData" @confirm="pickerConfirm" :list="dateList" v-model="showPicker" type="timeDate"
		@change="pickerChange"></i-picker>
	<view class="addCustom">
		<view class="form">
			<i-formItem title="车牌号" :require="true" v-if="storeInfo.merType!='1'">
				<view class="vno" @click="showCar = true" :class="{placeholders: !formData.vno}">
					{{formData.vno || '请填入车牌号'}}
				</view>
			</i-formItem>
			<view class="no_item" v-if="!formData.vno && !isOnceCheck && storeInfo.merType!='1'">请填写此项</view>
			<i-formItem title="姓名" :require="true">
				<input placeholder-class="placeholder-class" v-model="formData.userName" type="text"
					placeholder="请输入客户姓名">
			</i-formItem>
			<view class="no_item" v-if="!formData.userName && !isOnceCheck">请填写此项</view>
			<i-formItem title="手机号">
				<input placeholder-class="placeholder-class" :disabled="customerType == '0'" v-model="formData.mobile"
					type="number" placeholder="请输入客户手机号">
			</i-formItem>
			<view v-if="customerType == '0'" class="message">平台客户不支持修改手机号</view>
			<i-formItem title="性别">
				<radio-group style="width: 80%;" name="status" @change="radioChange">
					<label v-for="item in radioList" :key="item.value" style="margin-right: 18rpx;">
						<radio :checked="formData.sex === item.value" style="transform:scale(0.7)" color="#FB652E"
							:value="item.value" />
						<text class="text">{{item.label}}</text>
					</label>
				</radio-group>
			</i-formItem>
			<i-formItem @click="showPicker=true" title="生日"
				:content="formData.birthDay ? formData. birthDay :  '请选择客户生日'"
				:contStyle="formData.birthDay ? 'color: #2c2c2e':'color: #D1D1D6'" :right="true">
			</i-formItem>
			<i-formItem title="备注">
				<input placeholder-class="placeholder-class" v-model="formData.remark" type="text" placeholder="请输入备注">
			</i-formItem>
			<view style="height: 64rpx;"></view>
			<i-buttons radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E" @click="add"> 保存
			</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref,
		reactive
	} from 'vue';
	import useStore from '../../stores/index'
	import { checkForm, navTo, showTost, insertStr, getCountDays } from '../../utils/common';
	import { nameReg, phoneReg } from '../../utils/regs';
	import { customerCreateOrUpdate, customerDetail } from '../../api/business';


	const defaultNum = ref('')
	const disabled = ref(true)
	const showCar = ref(false)
	const isOnceCheck = ref(true)
	const showPop = ref(false)
	const showPicker = ref(false)
	const customerType = ref('')
	const valueData = ref([])
	const dateList = ref([[], [], []])

	const formData = reactive<{
		id ?: string;
		mobile : string;
		sex ?: string;
		userId ?: string;
		userName ?: string;
		vno ?: string;
		remark ?: string;
		"birthDay" ?: string,
	}>({
		"vno": "",
		"userName": "",
		"mobile": "",
		"sex": "0",
		remark: ''
	})
	const store = useStore()
	const storeInfo = computed(() => {
		return store.storeInfo
	})
	const confirmData = {
		title: '立即前往',
		color: '#5C6D80',
	}
	const radioList = [
		{
			label: '男',
			value: '0'
		},
		{
			label: '女',
			value: '1'
		},
	]

	const getDate = () => {
		const date = new Date().getFullYear()
		const month = new Date().getMonth() + 1
		const days = new Date().getDate()
		console.log(days, 'date');
		const day = getCountDays(month, date)

		for (let i = date; i > date - 150; i--) {
			dateList.value[0].push({
				label: i + '',
				value: date - i
			})
		}
		for (let v = 1; v < day + 1; v++) {
			if (v < 13) {
				dateList.value[1].push({
					label: v.toString().padStart(2, '0'),
					value: v
				})
			}
			dateList.value[2].push({
				label: v.toString().padStart(2, '0'),
				value: v
			})
		}
		valueData.value = [{
			label: date + '', value: 0
		}, { label: month + '', value: month },
		{ label: days + '', value: days },
		]
	}

	const add = async () => {
		isOnceCheck.value = false
		if(storeInfo.value.merType ==='1'){
			formData.vno = formData.mobile
		}
		const data = checkForm(formData, ['mobile', 'id', 'userId', 'remark', 'sex', 'birthDay'], {}, false, false)
		console.log(data, 'datadatadata');
		if (data) {
			return
		}
		if (!nameReg.test(formData.userName)) {
			showTost('请输入正确客户姓名')
			return
		}

		if (formData.mobile && !phoneReg.test(formData.mobile)) {
			showTost('请输入正确手机号')
			return
		}

		await customerCreateOrUpdate(formData)
		showTost(formData.id ? '编辑成功' : '添加成功', () => {
			navTo('', 'navigateBack')
		})
	}

	const numberInputResult = (e : string) => {
		defaultNum.value = e
		disabled.value = e.replace(/\s+/g, '').length < 8
	}
	const submit = async () => {
		const carVno = defaultNum.value.replace(/\s+/g, '').replace(/\·/g, '')
		formData.vno = carVno
		showCar.value = false
	}
	const propConfirm = () => { }

	const pickerConfirm = (e : any) => {
		formData.birthDay = `${e[0].label}-${e[1].label}-${e[2].label}`
		console.log(e, 'pickerConfirmpickerConfirm');

	}
	const pickerChange = (list : Array<number>) => {
		const y = list[0]
		const m = list[1]
		const year = dateList.value[0][y].label
		const month = dateList.value[1][m].label
		const day = getCountDays(month, year)
		dateList.value[2] = []
		for (let v = 1; v < day + 1; v++) {
			dateList.value[2].push({
				label: v.toString().padStart(2, '0'),
				value: v
			})
		}
	}

	const radioChange = (e : { detail : { value : string } }) => {
		formData.sex = e.detail.value
	}


	const getData = async () => {
		const { data } = await customerDetail({ id: formData.id, userId: formData.userId })
		formData.mobile = data.mobile || ''
		formData.userName = data.userName || ''
		formData.vno = data.vno || ''
		formData.sex = data.sex || ''
		formData.remark = data.remark || ''
		formData.birthDay = data.birthDay || ''
		defaultNum.value = data.vno && insertStr(data.vno, 2, '·')
		disabled.value = !data.vno
	}

	onLoad((option) => {
		if (option.customerType) {
			formData.id = option.id
			formData.userId = option.userId
			customerType.value = option.customerType
			getData()
		}
	})
	onReady(() => {
		getDate()
		uni.setNavigationBarTitle({
			title: (customerType.value || formData.id || formData.userId) ? '编辑客户' : '添加客户'
		})
	})
</script>

<style lang="scss" scoped>
	.addCustom {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;

		.form {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexC;

			.vno {
				@include dfont;
				width: 75%;
			}

			input {
				width: 80%;
			}
		}

	}

	.placeholders {
		@include dfont;
		color: $placeholder-color !important;
	}

	.car_number {
		height: 900rpx;
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.car_title {
			@include flexRS;
			padding-bottom: 48rpx;

			.image {
				width: 48rpx;
				height: 48rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

	}

	.no_item {
		width: 100%;
		border-top: 1rpx solid #FF453A;
		color: #FF453A;
		font-size: 26rpx;
	}

	.prop_title {
		@include flexRC;
		padding: 48rpx 0;
		@include dfont(32rpx);
	}

	.text {
		@include dfont;
	}

	.message {
		margin: 20rpx 0;
		@include dfont(26rpx);
		color: #A0A0AD;
	}
</style>